import React, { useState, useEffect, useRef } from 'react'
import { Tabs, Sticky, Card, Radio, Input, Uploader, Button, Form } from 'react-vant'
import { Popup, Space } from 'antd-mobile'
import { ArrowLeft, Arrow } from '@react-vant/icons'
import { history, useLocation } from 'umi'
import axios from 'axios'
import './zhifu.css'

export default function Shen() {
    const loaction = useLocation()
    // console.log(loaction.state.obj);
    const [visible1, setVisible1] = useState(false)

    const [xuan, setSelectedValue] = useState('');
    const [yuan, setnei] = useState('')
    const [img, setimgg] = useState('')
    const [form] = Form.useForm()
    const [imglist, setimglist] = useState([])

    const upload = async (file) => {
        const body = new FormData()
        body.append('file', file)
        console.log(body, "body111111111111111111111");
        const resp = await axios.post('http://localhost:3000/addimgyrt', body)
        let img = resp.data.img
        setimgg(img)
        setimglist(resp)
        console.log(img, 22222222222)
        return false
    }



    const addtui = async () => {
        await axios.post('http://localhost:3000/addtui', { xuan, yuan, img })
        // console.log('添加退款数据');
    }

    return (
        <div style={{ height: "135%", background: "#e2e2e2", paddingBottom: "10px" }}>
            <Sticky>
                <div style={{ background: "#fff" }}>
                    <p className='fanleft' style={{ display: "inline-block" }} onClick={() => history.push('/zhi', { ids: 1 })}><ArrowLeft fontSize={25} /></p>
                    <p style={{ display: "inline-block" }}>申请退款</p>
                </div>
            </Sticky>
            <div >
                {
                    [loaction.state.obj].map(item => (
                        <div key={item._id} style={{ background: "#fff", marginTop: "3px", marginBottom: "1px" }}>
                            {
                                item.imgs.map((item2, index2) => (
                                    <div key={index2} style={{ marginBottom: "10px", height: "100px" }}>
                                        <img src={item2.img} alt="" style={{ width: "80px", display: "block", display: "inline-block", verticalAlign: "middle", marginLeft: "10px", marginTop: "15px", marginRight: "15px" }} />
                                        <div style={{ display: "inline-block", verticalAlign: "middle" }}>
                                            <p>{item2.name}</p>
                                            <p style={{ display: "inline-block", color: "red" }}>￥{item.price.toFixed(2)}
                                            </p>
                                        </div>

                                        <p style={{ display: "inline-block", float: "right", marginRight: "20px", marginTop: "30px" }}>x{item.num}</p>
                                    </div>

                                ))
                            }
                        </div>
                    ))
                }
            </div>
            <div style={{ marginTop: "4px", width: "100%", height: "60px", background: "#fff" }}>
                <p style={{ float: 'left', lineHeight: "60px", marginLeft: "20px" }}>退款金额</p>
                <p style={{ float: "right", color: "red", lineHeight: "60px", marginRight: "20px" }}>￥108.90</p>
            </div>
            <Form colon
                form={form} style={{ width: "100%", padding: "0px", marginTop: "10px" }}>

                <Form.Item style={{ width: "100%" }}>
                    <Card style={{ height: "120px" }}>
                        <p style={{ display: 'inline-block', float: "left", marginLeft: "20px", marginTop: "25px", width: "45%" }}>退款原因</p>
                        <p onClick={() => {
                            setVisible1(true)
                        }}
                            style={{ display: 'inline-block', float: "right", textAlign: "right", marginRight: "18px", marginTop: "25px", width: "35%" }}
                        >请选择<Arrow style={{ marginTop: "10px" }} /></p>
                        <div style={{ position: "absolute", left: "20px", top: "65px" }}>
                            <p style={{ display: "inline-block" }}>退款说明:</p>
                            <div style={{ display: "inline-block" }}>
                                <Input
                                    value={yuan}
                                    onChange={neir => setnei(neir)}
                                    placeholder='请输入退款说明'
                                    style={{ display: "inline-block", paddingLeft: "10px" }}
                                />
                            </div>
                        </div>
                    </Card>
                </Form.Item>


                <Form.Item >
                    <Card style={{ height: "150px", marginBottom: "10px" }}>
                        <p style={{ margin: "20px" }}>上传凭证（最多3张）</p>
                        <div style={{ marginLeft: "20px" }}>
                            <Uploader
                                // previewImage={false}
                                defaultValue={[]}
                                accept='*'
                                onChange={v => console.log(v)}
                                upload={upload}
                            />
                        </div>
                    </Card>
                </Form.Item>

                {/* <Form.Item style={{ width: "100 %" }}> */}
                <Sticky position='bottom' >
                    <div style={{ height: "60px", paddingTop: "15px", width: "100%" }}>
                        <Button type='info' block round style={{ width: "100%" }} onClick={addtui}>
                            提交
                        </Button>
                    </div>
                </Sticky>
                {/* </Form.Item> */}

            </Form>

            <div>
                <Popup
                    visible={visible1}
                    onMaskClick={() => {
                        setVisible1(false)
                    }}
                    onClose={() => {
                        setVisible1(false)
                    }}
                    showCloseButton
                    bodyStyle={{
                        height: '80vh', borderTopLeftRadius: '8px',
                        borderTopRightRadius: '8px',
                    }}
                >
                    <ul style={{ listStyle: "none", marginTop: "20px" }} className='shen'>
                        <li style={{ fontSize: "20px" }}>请选择取消订单原因（必选）</li>
                        <Radio.Group defaultValue="0"
                            onChange={val => {
                                setSelectedValue(val)
                            }}
                        >
                            <Radio name="商品无货"  >
                                <li>商品无货</li>
                            </Radio>
                            <Radio name="配送时间问题" >
                                <li>配送时间问题</li>
                            </Radio>
                            <Radio name="不想要了">
                                <li>不想要了</li>
                            </Radio>
                            <Radio name="商品信息填写错误">
                                <li>商品信息填写错误</li>
                            </Radio>
                            <Radio name="地址信息填写错误">
                                <li>地址信息填写错误</li>
                            </Radio>
                            <Radio name="其他">
                                <li>其他</li>
                            </Radio>
                        </Radio.Group>
                    </ul>
                </Popup>
            </div>
        </div>
    )
}
